<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="./resources/templates/loginTemplate.xhtml">
    <ui:define name="content">
        <f:view>
            <script type="text/javascript"> 
                //<![CDATA[ 
                this.onload = function() {
                    $("#login_img").css("display", "none");
                    $("#login_img").fadeIn('slow');
                }
                //]]> 
            </script> 
            <div id="login_forms">
                <h:form>
                    <h1><h:outputText value="Se connecter"/></h1>
                    <p:growl id="messages" />
                    <table>
                        <tr>
                            <td><h:outputLabel value="Email" for="email"/></td>
                            <td>
                                <h:inputText id="email" value ="#{login.email}" required="true" requiredMessage="Veuillez entrer un email"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel value="Mot de passe" for="pwd"/></td>
                            <td>
                                <h:inputSecret id="pwd" value ="#{login.pwd}" required="true" requiredMessage="Veuillez entrer un mot de passe"/>
                            </td>
                        </tr>
                        <tr>
                            <td width="150"></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right"><h:commandButton value="Se connecter" action="#{login.login}"/>
                            </td>
                        </tr>
                    </table>
                </h:form>
                <br/><br/>
                <h:form>
                    <h1><h:outputText value="Créer un compte"/></h1>
                    <p:growl id="registerMsgs" />
                    <table>
                        <tr>
                            <td width="150"><h:outputLabel value="Nom" for="reg_lastname"/></td>
                            <td>
                                <h:inputText id="reg_lastname" value ="#{register.lastname}" required="true" requiredMessage="Veuillez entrer votre nom"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel value="Prénom" for="reg_firstname"/></td>
                            <td>
                                <h:inputText id="reg_firstname" value ="#{register.firstname}" required="true" requiredMessage="Veuillez entrer votre prénom"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel value="Email" for="reg_email"/></td>
                            <td>
                                <h:inputText id="reg_email" value ="#{register.email}" required="true" requiredMessage="Veuillez entrer un email"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel value="Confirmer email" for="reg_c_email"/></td>
                            <td>
                                <h:inputText id="reg_c_email" value ="#{register.c_email}" required="true" requiredMessage="Veuillez confirmer votre email"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel value="Mot de passe" for="reg_pwd"/></td>
                            <td>
                                <h:inputSecret id="reg_pwd" value ="#{register.password}" required="true" requiredMessage="Veuillez entrer un mot de passe"/>
                            </td>
                        </tr>
                        <tr>
                            <td><h:outputLabel value="Confirmer mot de passe" for="reg_c_pwd"/></td>
                            <td>
                                <h:inputSecret id="reg_c_pwd" value ="#{register.c_password}" required="true" requiredMessage="Veuillez confirmer votre mot de passe"/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right"><h:commandButton value="S'enregistrer" action="#{register.register}"/></td>
                        </tr>
                    </table>
                </h:form>
            </div>

            <div id="login_img">
                <img border="none" alt="login image" width="355" src="resources/images/login_sound-u_img.jpg"/>
            </div>
        </f:view></ui:define>

</ui:composition>
